<template>
   <div class="common-layout">
        <el-container>
          <el-aside width="200px">
            <el-menu
            router
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose" 
          >
          <div class="imgbox">
            <img src="../assets/imge/tp.jpeg" alt="">
            <h1>千峰后台管理系统</h1>
          </div>
          <!-- 二级路由 el-menu-item表示没有子级 -->
           <el-menu-item :index="item.auth_path" v-for="item in acl" v-show="item.children.length == 0">
              <el-icon><icon-menu /></el-icon>
              <span>{{ item.auth_name }}</span>
              </el-menu-item> 
              <!-- el-sub-menu 表示有子级 -->
            <el-sub-menu :index="item.auth_path" v-for="item in acl" v-show="item.children.length != 0">
              <template #title>
                <el-icon><location /></el-icon>
                <span>{{ item.auth_name }}</span>
              </template>
              <!-- 没有子级 -->
            <el-menu-item :index="child.auth_path" v-show="child.is_nav == 1" v-for="child in item.children">
                  <el-icon><icon-menu /></el-icon>
                  <span>{{ child.auth_name }}</span>
                  </el-menu-item> 
              </el-sub-menu>
          </el-menu>
          </el-aside>
          <el-container>
            <el-header>Header</el-header>
            <el-main>
                <!-- 要显示的二级路由的坑 -->
                <router-View></router-View>
                
            </el-main>

          </el-container>
        </el-container>
      </div>
</template>

<script setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
    //首先获取本地的登录是存的菜单项
    const acl = JSON.parse(localStorage.getItem('acl'))
    console.log('acl',acl);
</script>

<style scoped lang="scss">
.common-layout,
.el-aside,
.el-container,
.el-menu{
    height: 100%;
}
.imgbox{
  display: flex;
  h1{
    text-align: center;
   margin-top: 15px;
   color: blue;
  }

  img{
    margin-top: 10px;
    width: 50px;
    height: 50px;
  }
}

</style>